<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://static.robotwebtools.org/threejs/current/three.min.js"></script>
<script src="https://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
<script src="https://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
<script src="https://static.robotwebtools.org/ros3djs/current/ros3d.min.js"></script>
<script>
  (function(i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function() {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o), m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

  ga('create', 'UA-39765480-1', 'robotwebtools.org');
  ga('send', 'pageview');
</script>
<script>
  function init() {
    var ros = new ROSLIB.Ros({
      url : 'ws://demo.robotwebtools.org:9090'
    });

    var viewer = new ROS3D.Viewer({
      divID : 'markers',
      width : window.innerWidth,
      height : window.innerHeight,
      antialias : true
    });

    var markerClient = new ROS3D.MarkerClient({
      ros : ros,
      tfClient : new ROSLIB.TFClient({
        ros : ros,
        angularThres : 0.01,
        transThres : 0.01,
        rate : 10.0,
        fixedFrame : '/my_frame'
      }),
      topic : '/visualization_marker',
      rootObject : viewer.scene
    });
  }
</script>
</head>
<body onload="init()">
  <div id="markers"></div>
</body>
</html>
